<template>
    <div class="person">
      <h2>姓名：{{name}}</h2>
      <h2>年龄：{{age}}</h2>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">修改年龄</button>
      <button @click="showTel">查看联系方式</button>
    </div>
</template>

<script lang="ts">

  export default {
    name: 'Person',
    beforeCreate() {
      console.log("beforeCreate")
    },
  
    setup() {
      console.log("setup")
      // console.log('@@', this) // setup函数中的this是undefined，Vue3中已经弱化this了
      // 数据
      let name = '张三'       // 此时的name不是响应式的
      let age = 18            // 此时的age不是响应式的
      let tel = 12345678901   // 此时的tel不是响应式的

      // 方法
      function changeName() {
        name = 'zhang-san'    // 注意：这样修改name，页面是没有变化的
        console.log(name)     // name确实改了，但name不是响应式的
      }

      function changeAge() {
        age += 1
      }

      function showTel() {
        alert(tel)
      }

      return {name, age, changeName, changeAge, showTel}

      // setup的返回值，也可以是一个渲染函数
      // return ()=> '哈哈'

    }
  }
</script>

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button {
    margin: 0 5px;
  }
</style>